<template>
  <div ref="mainCon" class="container">
    <topTitle v-if="!hiddleToolBar" :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="专户号" class="row-padding-bottom">
              <el-input
                placeholder="请输入"
                clearable
                v-model="filterField.accountCode"
                @blur="filterField.accountCode = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="银行编码" class="row-padding-bottom">
              <el-input
                placeholder="请输入"
                clearable
                v-model="filterField.bankCode"
                @blur="filterField.bankCode = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchTable" class="commonBtn"></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <exportBtn
              :dataLen="tableData.length"
              :filterField="filterField"
              api="api-s/report/export_SYS_BANKDATA_BALANCE"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <!-- 列表 -->
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            align="center"
            prop="accountCode"
            label="专户号"
            :formatter="formatTd"
            width="200px"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="bankName"
            label="银行名称"
            :formatter="formatTd"
          ></el-table-column>
          <!-- <el-table-column align="center" prop="accountName" label="专户名称" :formatter=formatTd></el-table-column> -->
          <el-table-column label="专户名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.accountName"
                :columnName="'accountName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createDate"
            label="推送时间"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="updateDate"
            label="更新时间"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="签约状态"
            width="180px"
          >
            <template slot-scope="scope">
              {{ scope.row.status == 'Y' ? '已签约' : '未签约' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="balance"
            label="专户余额"
            :formatter="formatTd"
          ></el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'balancelist',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '专户余额查询',
      requestUrl: 'api-su/bankdata/balancelist', //表格请求路径
      loading: true,
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        accountCode: '',
        bankCode: '',
      },
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.mainCon {
  top: 198px;
}
@media only screen and (max-width: 1366px) {
  /deep/.searchInputWidth .el-form--inline .el-form-item__label {
    width: 80px;
  }
}
</style>
